<template>
  <q-dialog v-model="visible">
    <q-card>
      <q-card-section class="row q-gutter-x-sm">
        <div class="text-h6">新增作业方案</div>
      </q-card-section>
      <q-separator />
      <q-card-section class="q-gutter-y-md">
        <q-input style="width: 20rem" v-model="plan.name" filled>
          <template v-slot:before>
            <div class="text-subtitle1 text-grey-7">作业名称</div>
          </template>
        </q-input>
        <q-input
          rows="6"
          v-model="plan.description"
          outlined
          type="textarea"
          placeholder="在此输入对于作业的一些描述"
        />
      </q-card-section>
      <q-slide-transition>
        <div v-show="plan.name !== ''" class="bg-primary">
          <q-btn
            unelevated
            class="full-width text-subtitle1 text-bold"
            color="primary"
            label="新增计划"
            @click="newTask"
          />
        </div>
      </q-slide-transition>
    </q-card>
  </q-dialog>
</template>

<script>
import { ref, inject } from "vue";
import { api } from "boot/axios";
import { useQuasar } from "quasar";
import { useAPIStore } from "stores/api/index.js";

export default {
  name: "NewPlan",
  setup() {
    const $q = useQuasar();
    const visible = ref(false);
    const plan = ref({
      name: "",
      description: "",
    });

    const centerUrl = useAPIStore().centerUrl;
    const getPlans = inject("getPlans");
    function newTask() {
      api.post(centerUrl + "plan", plan.value).then((rs) => {
        if (rs.status === 200) {
          $q.notify({
            message: "巡检方案创建成功",
            type: "positive",
            position: "bottom-right",
          });
          getPlans();
          visible.value = false;
          plan.value = {
            name: "",
            description: "",
          };
        } else {
          console.log(rs);
          $q.notify({
            message: "方案创建失败",
            type: "negative",
            position: "bottom-right",
          });
        }
      });
    }
    return {
      visible,
      plan,
      newTask,
      show: function () {
        visible.value = true;
      },
    };
  },
};
</script>
